<template>
	<div class="aid">
		<div class="base">
			<p class="fixed-top">
				{{ text.ID ? (text.listType == 3 ? '查看申报' : text.listType == 4 ? '审批' : '修改申报') : '新增申报' }}
				<a-icon @click="closeFunction" type="close" />
			</p>
			<div class="main" id="new_message">
				<a-form :form="form" v-if="text.listType == 1 || text.listType == 2">
					<a-form-item v-for="(item,i) in formList" :key="i">
						<span class="autolabel" slot="label">{{ item.Name }}</br>(请上传{{ item.TypeName }})</span>
						<a-upload v-if="!currentID"
							v-decorator="[item.ID, { rules: [{ required: true, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }] }]"
							:accept="item.Type == 1 ? '.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,.pdf' : 'image/*'"
							:action="requestUrl + '/Common/DoUploadFile?type=file'" list-type="picture-card"
							:file-list="fileList[item.ID]" @preview="handlePreview"
							:before-upload="e => beforeUploadfile(e,item.ID)" @change="e => handleChange(e, item.ID)">
							<div>
								<a-icon type="plus" />
								<div class="ant-upload-text">Upload</div>
							</div>
						</a-upload>
						<a-upload v-if="currentID"
							v-decorator="[item.SessionDeclareFileID, { rules: [{ required: true, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }] }]"
							:accept="item.Type == 1 ? '.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,.pdf' : 'image/*'"
							:action="requestUrl + '/Common/DoUploadFile?type=file'" list-type="picture-card"
							:file-list="fileList[item.SessionDeclareFileID]" @preview="handlePreview"
							:before-upload="e => beforeUploadfile(e,item.SessionDeclareFileID)"
							@change="e => handleChange(e, item.SessionDeclareFileID)">
							<div>
								<a-icon type="plus" />
								<div class="ant-upload-text">Upload</div>
							</div>
						</a-upload>
					</a-form-item>
					<a-form-item>
						<!-- <span class="autolabel" slot="label"></span> -->
						<div style="margin: 15px 0;color: red;text-align: center;">驳回的申请项再次修改则再次提交审批</div>
					</a-form-item>
					<a-form-item class="fixed-bottom">
						<!-- <a-popconfirm v-if="!currentID && currentType=='user'" title="暂存后不会提交，请添加完成员后在列表页点击提交按钮提交!"
							ok-text="好的" cancel-text="取消" @confirm="confirm" @cancel="cancel">
							<a-button type="primary" html-type="submit">暂存</a-button>
						</a-popconfirm> -->
						<a-button type="primary" @click="handleSubmit">
							{{ !text.ID ? '确认添加' : '确认修改' }}
						</a-button>
						<a-button style="margin-left: 10px;" @click="closeFunction">取消</a-button>
					</a-form-item>
				</a-form>
				<a-form :form="form" v-if="text.listType == 4">
					<a-form-model-item label="审核状态" prop="isAdopt">
						<a-radio-group name="radioGroup"
							v-decorator="['isAdopt', { rules: [{ required: true, message: '请选择是否通过' }] }]">
							<a-radio :value="true">通过</a-radio>
							<a-radio :value="false">驳回</a-radio>
						</a-radio-group>
					</a-form-model-item>
					<a-form-model-item label="审核意见" prop="comment">
						<a-input type="textarea" :auto-size="global.textareaHeight"
							v-decorator="['comment', { rules: [{ required: !form.getFieldValue('isAdopt'), message: '请输入审核意见' }] }]" />
					</a-form-model-item>
					<a-form-item class="fixed-bottom">
						<a-button type="primary" @click="handleSubmit">确定</a-button>
						<a-button style="margin-left: 10px;" @click="closeFunction">取消</a-button>
					</a-form-item>
				</a-form>
				<a-timeline class="detailtimeline" v-if="text.listType == 3">
					<a-timeline-item>
						<h4>基础信息</h4>
						<a-list class="listarea" size="small" bordered :data-source="detailList">
							<a-list-item slot="renderItem" slot-scope="item, index" style="display: flex;">
								<div class="infotit">{{ item.key }} :</div>
								<div class="flex-1">
									<div class="infocell">{{ item.val }}</div>
								</div>
							</a-list-item>
						</a-list>
					</a-timeline-item>
					<a-timeline-item>
						<h4>附件信息</h4>
						<div class="tableZdy">
							<div class="imagecon">
								<div v-for="(item,i) in formList" :key="i" style="display: flex;">
									<!-- <div class="infocell" v-for="(file, n) in item.FilePath.split(',')" :key="n">
										{{ file.split('|')[0] }}
										<a-icon type="download" v-if="file" @click="downloadFile(file, 1)"
											style="height: 12px;vertical-align: top;margin-top: 4px;cursor: pointer;">
										</a-icon>
									</div> -->
									<div   class="imagelist" v-for="(file, n) in item.FilePath.split(',')" :key="n" >
										<!-- {{ file }} -->
										<!-- {{ file.split('|')[0] }} -->
										<div class="iconcon">
											<img v-if="file.split('|')[0].indexOf('jpg')>0||file.split('|')[0].indexOf('png')>0" :src="requestUrl+(file.split('|')[1])" />
											<div v-else class="fileicon">{{file.split('|')[0].split('.')[1] }}</div>
										</div>
										<div class="title">{{ file.split('|')[0] }}</div>
										<div class="oprate">
											<oprateBtn title="下载" icon="icon-xiazai-wenjianxiazai-04" color="#1890FF" @tap="downloadFile(file.split('|')[1], 1)" ></oprateBtn>
										</div>
									</div> 
									<!-- <div class="iconcon">
										<img v-if="item.FilePath.indexOf('jpg')>0||item.FilePath.indexOf('png')>0" :src="requestUrl+(item.FilePath.split('|')[1])" />
										<div v-else class="fileicon">{{ item.FilePath.split('|')[0].split('.')[1] }}</div>
									</div>
									<div class="title">{{ item.FilePath.split('|')[0].split('.')[0] }}</div>
									<div class="oprate">
										<oprateBtn title="下载" icon="icon-xiazai-wenjianxiazai-04" color="#1890FF" @tap="downloadFile(item, 1)" ></oprateBtn>
									</div> -->
								</div>
								<!-- <div class="el-table__empty-text" style="margin:0 auto;" v-show="oldList.length==0"></div> -->
							</div>
						</div>
						<!-- <a-list class="listarea" size="small" bordered :data-source="formList">
							<a-list-item slot="renderItem" slot-scope="item, index" style="display: flex;">
								<div class="infotit">{{ item.Name }} :</div>
								<div class="flex-1">
									<div class="infocell" v-for="(file, n) in item.FilePath.split(',')" :key="n">
										{{ file.split('|')[0] }}
										<a-icon type="download" v-if="file" @click="downloadFile(file, 1)"
											style="height: 12px;vertical-align: top;margin-top: 4px;cursor: pointer;">
										</a-icon>
									</div>
								</div>
							</a-list-item>
						</a-list> -->
					</a-timeline-item>
					<a-timeline-item v-if="currentType!='user'">
						<h4>成员信息</h4>
						<el-table :data="memberData" border highlight-current-row style="width: 100%;">
							<el-table-column type="index" label="序号" width="60"></el-table-column>
							<el-table-column prop="UserName" label="姓名" min-width="160"></el-table-column>
							<el-table-column prop="UserNo" label="学号" min-width="100"></el-table-column>
							<el-table-column prop="IsCaptain" label="负责人" min-width="100">
								<template slot-scope="scope">
									<a-tag :color="scope.row.IsCaptain?'blue':'red'">{{ scope.row.IsCaptain?"队长":"队员" }}</a-tag>
								</template>
							</el-table-column>
						</el-table>
					</a-timeline-item>
					<a-timeline-item v-for="(v, i) of flowData" :key="v.ID" v-if="flowData.length > 0&&detail.State!=4">
						<h4 class="gj" :style="{ color: '#ff4071' }">
							<div class="tit">审核流程：{{ v.FlowTypeName }} --
								{{ v.IsAdopt == null ? '审核中' : v.IsAdopt ? '通过' : '驳回' }}
							</div>
							<div class="followContent"></div>
						</h4>
						<h4 class="gj" style="display: flex" v-if="v.ExamUserData && v.ExamUserData.length > 0&&v.IsAdopt == null">
							<div class="tit">审核人：</div>
							<div class="cell flowusercon">
								<div class="flowuserlist" v-for="(flowitem, flowindex) in v.ExamUserData"
									:key="flowindex">
									{{ flowitem.Name }} - {{ flowitem.UserNo }} - {{ flowitem.DepartName }}
								</div>
							</div>
						</h4>
						<h4 v-if="v.IsAdopt != null" class="gj" style="display: flex">
							<div class="tit">审核人：</div>
							<div class="cell">{{ v.ExamUserName }}</div>
							&nbsp;&nbsp;
							<div class="tit">审核时间：</div>
							<div class="cell">{{ v.ExamTime }}</div>
						</h4>
						<h4 v-if="v.IsAdopt != null" class="gj" style="display: flex">
							<div class="tit">审核内容：</div>
							<div class="cell">{{ v.ExamComment }}</div>
						</h4>
					</a-timeline-item>
				</a-timeline>
				<div style="text-align: center;" v-if="text.listType == 3&&text.currentState==0" ><a-button type="primary" style="width: 200px;" @click="detailShen(texttext)">审批</a-button></div>
				
			</div>
		</div>
	</div>
</template>

<script>
	import moment from 'moment';
	import Cache from '@/utils/cache';
	import tengdForm from '@components/SearchForm/tengdForm.vue';
	import {
		UserPracticeTeamDeclare,
		UserPracticeTeamDeclareFlowDoGetDetail,
		UserPracticeTeamDeclareFlowDoExam,
		Common,
		ManagePracticeTeamDeclareFlow
	} from '@/api/follow';
	export default {
		props: {
			text: Object,
			currentType: String
		},
		components: {
			tengdForm
		},
		watch: {
			text: function(text) {
				console.log(text)
				if (!text.ID) {
					this.currentID = '';
					this.getOtherList()
				} else {
					this.currentID = text.ID;
					if (text.listType == 2 || text.listType == 3) {
						this.getDetail();
					}
				}
			}
		},
		data() {
			return {
				loading: false,
				formLayout: 'horizontal',
				form: this.$form.createForm(this, {
					name: 'coordinated'
				}),
				currentID: '',
				formList: [],
				formListItem: {},
				SessionIDList: [],
				ThemeIDList: [],
				TypeIDList: [],
				ApplyTypeList: [],
				userList: [],
				DepartCodeList: [],
				ProvinceList: [],
				CityList: [],
				detail: {},
				formData: [],
				TeacherList: [],
				detailList: [],
				flowData: [],
				teacherData: [],
				memberData: [],
				requestUrl: this.global.requestUrl,
				fileList: {},
				texttext:{}
			};
		},
		created() {},
		methods: {
			moment,
			async getOtherList() {
				console.log(this.text.SessionDeclareID);
				let res = await Common('DoGetPracticeSessionDeclareFileList', {
					 sessionDeclareID: this.text.SessionDeclareID
					
				})
				this.formList = res.data.data
			},
			detailShen(text){
				console.log('sssss');
				console.log(this.text);
				text.flowID=this.text.flowID;
				this.$emit('shenpiFun',text);
			},
			downloadFile(path, type) {
				window.open(this.requestUrl + path, '_blank');
			},
			filterOption(input, option) {
				return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
			},
			beforeUploadfile(file, name) {
				const isLt10M = file.size / 1024 / 1024 < 10;
				if (!isLt10M) {
					this.fileList[name] = this.fileList[name].splice(this.fileList[name].length - 1, 1)
					this.$message.error('文件大小不能超过10M!');
				}
				return isLt10M;
			},
			handleChange(info, name) {
				if (!info.file.status) {
					return false
				}
				let {
					fileList
				} = info;
				const status = info.file.status;
				if (status === 'done') {
					if (info.file.response.code == 0) {
						this.$message.success(info.file.response.msg)
						this.fileList[name] = [...fileList]; //重点
					} else {
						this.$message.error(info.file.response.msg)
						this.fileList[name] = this.fileList[name].splice(this.fileList[name].length - 1, 1)
					}
				}
				this.fileList[name] = [...fileList]; //重点
			},
			async handlePreview(file) {
				if (file.url) {
					this.previewImage = file.url;
				} else {
					this.previewImage = this.requestUrl + file.response.url;
				}
				window.open(this.previewImage, '_blank')
			},
			async getDetail() {
				let data = {};
				let res = {}
				if(this.currentType=='user'){
					data.id = this.text.TeamDeclareID;
					res = await UserPracticeTeamDeclare('DoGetDetail', data)
				}else if(this.currentType=='PracticeTeamDeclareSp'){
					
					data.id = this.text.ID;
					res = await UserPracticeTeamDeclareFlowDoGetDetail(data)
				}else{
					data.id = this.currentID
					res = await ManagePracticeTeamDeclareFlow('DoGetDetail', data)
				}
				this.detail = res.data.data;
				if (this.text.listType == 2) {
					let detail = res.data.data;
					this.formList = res.data.resultFileData
					let list = res.data.resultFileData
					let that = this
					setTimeout(()=>{
						for (var i = 0; i < list.length; i++) {
							that.form.setFieldsValue({
								[list[i].SessionDeclareFileID]: list[i].FilePath
							});
							that.fileList = {
								...that.fileList,
								[list[i].SessionDeclareFileID]: []
							};
						}
						for (let i in that.fileList) {
							for (let n = 0; n < list.length; n++) {
								if (list[n].SessionDeclareFileID == i) {
									let arr = list[n].FilePath.split(',');
									for (let m = 0; m < arr.length; m++) {
										if (arr[m]) {
											that.fileList[i].push({
												uid: m,
												url: that.requestUrl + arr[m].split('|')[1],
												name: arr[m].split('|')[0],
												status: 'done'
											});
										}
									}
								}
							}
						}
					},200)
					console.log(that.form.getFieldsValue())
					
				}
				if (this.text.listType == 3) {
					this.texttext=res.data.data;
					this.memberData = res.data.memberData;
					this.formList = res.data.resultFileData
					this.flowData = res.data.resultFlowData;
					let {
						SessionDeclareName,
						TeamName,
						StateName,
						AddTime,
					} = this.detail;
					let middleKey = [];
					let miidle = [];
					middleKey = [
						'申请项名称',
						'团队名称',
						'审核状态',
						'申请时间',
					];
					miidle = [
						SessionDeclareName,
						TeamName,
						StateName,
						AddTime,
					];
					this.detailList = miidle.map((v, i) => {
						return {
							key: middleKey[i],
							val: v
						};
					});
				}
			},
			closeFunction(data) {
				this.form.resetFields();
				this.fileList = {}
				this.$emit('closeFun', data);
			},
			confirm(e) {
				this.handleSubmit(e);
			},
			cancel(e) {},
			handleSubmit(e) {
				this.form.validateFields(async (err, values) => {
					console.log(values)
					if (!err) {
						let res = {}
						let data = {}
						data = values
						if (this.currentType == 'user') {
							data.TeamID = this.text.TeamID
							data.SessionDeclareID = this.text.SessionDeclareID
							for (let i in this.fileList) {
								let arr = [];
								for (let m = 0; m < this.fileList[i].length; m++) {
									if (this.fileList[i][m].url) {
										if (this.fileList[i][m].url.indexOf(this.requestUrl) > -1) {
											this.fileList[i][m].url = this.fileList[i][m].url.substring(this
												.requestUrl.length);
										}
										arr.push(this.fileList[i][m].name + '|' + this.fileList[i][m].url);
									} else {
										arr.push(this.fileList[i][m].response.fileName + '|' + this.fileList[i][m]
											.response.url);
									}
								}
								data[i] = arr.join(',');
							}
							if (this.currentID) {
								data.ID = this.text.TeamDeclareID
								res = await UserPracticeTeamDeclare('DoUpdate', data);
							} else {
								res = await UserPracticeTeamDeclare('DoAdd', data);
							}
						}
						if (this.currentType == 'collegeFlow' || this.currentType == 'schoolFlow') {
							let idstr =this.text.flowID||this.currentID;
							if(idstr.split(',').length>1){
								let arr = idstr.split(',')
								for(let i=0;i<arr.length;i++){
									data.id = arr[i]
									res = await ManagePracticeTeamDeclareFlow('DoExam', data);
								}
							}else{
								data.id = this.text.flowID||this.currentID
								res = await ManagePracticeTeamDeclareFlow('DoExam', data);
							}
						}
						if (this.currentType == 'PracticeTeamDeclareSp'){
							data.id = this.text.ID
							res = await UserPracticeTeamDeclareFlowDoExam( data);
						}
						
						if (res.data.code === 0) {
							this.$message.success(res.data.msg);
							this.closeFunction('1');
						} else {
							this.$message.error(res.data.msg);
						}


					}
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	/deep/.ant-form-item-label {
		width: 200px !important;
		text-align: center;
	}

	.autolabel {
		line-height: 20px;
		display: inline-block;
	}
</style>
